<template>
    <div class="home-page">
        <cjc-home title="运动健身" @customRouter="customRouter" :btn3='this.$store.state.subscribeText' @btn3click="btn3click"></cjc-home>
        <div class="describle">
            <img src="static/images/homepage-cover.png" width="100%" alt="">
            <div class="desc-container">
                <p  v-for="item in this.descContent" :key="item.index">{{ item.content }}</p>
            </div>
        </div>
        <div class="pop-content" :class="[{pophide: !popShow, popshow: popShow}]">
            <div @click="popContentShow" class="img-button">
                <img src="static/images/xiangxia.png" width="100%" height="100%" alt="">
            </div>
            <!-- <pullRefresh :dataLoaded="dataLoaded"  :dataLoding="dataLoding" -->
            <pullRefresh :dataLoding="dataLoding"
                    @fetchData="getSubscribleArticle" 
                    @refresh="refresh" 
                    @getScrollTop="getScrollTop">
                <div class="pop-content-bottom">
                    <div class="home-shuffling" @click="goCourse">
                        <div class="swiper-container">
                            <!-- <img src="static/images/课程图片.png" width="100%" alt=""> -->
                            <template>
                                <swiper :options="swiperOption">
                                    <swiper-slide v-for="item in shufflingList" :key="item.index">
                                        <img :src=item.imgUrl width="100%">
                                        <div class="shuffling-tags"><span>课程</span></div>
                                        <!-- <div class="shuffling-title">{{ item.title }}</div>
                                        <div class="shuffling-desc">{{ item.desc }}</div> -->
                                    </swiper-slide>
                                    <div class="swiper-pagination" slot="pagination"></div>
                                </swiper>
                            </template>
                        </div>
                    </div>
                    <ul class="home-article" v-for="(item) in contentList">
                        <!-- <a :href=item.url> -->
                            <li class="article-content" @click="goContent(item.url)">
                                <div class="article-cover">
                                    <img :src=item.contentUrlImg alt="">
                                </div>
                                <div class="article-show">
                                    <div class="article-title">{{ item.articTitle }}</div>
                                    <div class="article-desc">{{ item.articDesc }}</div>
                                </div>
                            </li>
                        <!-- </a> -->
                    </ul>
                </div>
            </pullRefresh>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import Swiper from 'swiper'
var contentRenderList = []
export default {
    name: 'home',
    data() {
        // const Vm = this
        return {
            popShow: true,
            descContent: '',
            keepTime: 3000,
            swiperOption: {
                pagination: {
                    el: '.swiper-pagination',
                    // type: 'custom'
                },
                loop: true,
                // autoplay: true,
                autoplay: {
                    delay: 3000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false,
                },
            },
            account: null,
            dataLoaded: false,
            dataLoding: false,
            doRefresh: true,
        }
    },
    created() {
        const Vm = this
        // 登录接口调用
        Vm.$store.dispatch('login', {
            Vm: this,
            username: '41401427',
            password: '416321',
            type: 1
        }).then(res => {
            // console.log('loginInfo res', res.result)
            Vm.$store.commit('SET_userInfo', res.result)
            Vm.account = res.result.IM_ACCOUNT
            Vm.$store.dispatch('saveUserInfo', Vm.$store.state.userInfo)
                .then(res => {
                    console.log('保存的用户信息', res)
                    // alert(123)
                    Vm.isSubscrible()
                })
        })
        // console.log('loginInfo', loginInfo)
        console.log('home state', this.$store.state.subscribeStatu)
        // if (this.$store.state.subscribeStatu === 1) {
        //     this.btn3 = '取消订阅'
        // } else if (this.$store.state.subscribeStatu === 0) {
        //     this.btn3 = '订阅'
        // } else {
        //     this.btn3 = ''
        // }
        this.getDescribleContent()
        this.$nextTick(() => {
            new Swiper('.swiper-container', {
                loop: true,
                // autoplay: true,
                // autoplay: {
                //     delay: 3000,
                //     stopOnLastSlide: false,
                //     disableOnInteraction: true,
                // },
            })
        })
        this.getShufflingImg()
        this.getSubscribleArticle()
    },
    components: {
        cjcHome: () => import('@/components/common/NavHome.vue'),
    },
    computed: {
        shufflingList() {
            const Vm = this
            let shuffling = Vm.$store.state.shufflingImg
            console.log(shuffling)
            let tempObj = []
            let a
            try {
                shuffling.map((item) => {
                    a = {
                        imgUrl: item.imgUrl
                    }
                    tempObj.push(a)
                })
                return tempObj
            } catch (err) {
                console.log(err)
            }
        },
        btn3() {
            const Vm = this
            if (this.$store.state.subscribeStatu === 1) {
                Vm.$store.commit('SET_subscribeText', '取消订阅')
            } else {
                Vm.$store.commit('SET_subscribeText', '订阅')
            }
            // console.log('btn3', this.$store.state.subscribeText)
            // return this.$store.state.subscribeText
        },
        contentList() {
            const Vm = this
            let tempList = Vm.$store.state.subscribeContentList
            // let tempObj = []
            let a
            try {
                tempList.map((item) => {
                    item.sub = item.sub.substr(0, 30) + '...'
                    a = {
                        contentUrlImg: item.img,
                        articTitle: item.title,
                        articDesc: item.sub,
                        url: item.url
                    }
                    contentRenderList.push(a)
                })
                console.log('当前文章总数', contentRenderList.length)
                return contentRenderList
            } catch (err) {
            }
        }
    },
    watch: {
    },
    methods: {
        customRouter() {
            this.$cjc.closeWebView()
        },
        getScrollTop(ScrollTop) {
            const Vm = this
            if (contentRenderList.length >= Vm.$store.state.subTotal) {
                Vm.doRefresh = false
            }
            // console.log(ScrollTop)
        },
        refresh() {},
        // 查看是否关注
        async isSubscrible() {
            const Vm = this
            console.log('sssssssss', Vm.$store.state.userInfo)
            Vm.$store.dispatch('isSubscrible', {
                userId: Vm.$store.state.userInfo.IM_ACCOUNT,
            })
                .then(res => {
                    // console.log('wenzhang', res)
                    if (res.data.status === 1000) {
                        console.log('guan zhu xin xi', res.data.result)
                        Vm.$store.commit('SET_subscribeStatu', res.data.result)
                        if (Vm.$store.state.subscribeStatu === 1) {
                            Vm.$store.commit('SET_subscribeText', '取消订阅')
                        } else {
                            Vm.$store.commit('SET_subscribeText', '订阅')
                        }
                        console.log(res.data.msg, res.data.result)
                    }
                })
        },
        async getDescribleContent() {
            await axios.get('static/config/static-content.json')
                .then(res => {
                    console.log(res.data.staticContent)
                    this.descContent = res.data.staticContent
                })
            // return describleContent.data.staticContent
        },
        reachBottom() {
            console.log('到达底部')
            if (this.dataLoaded) {
                this.$store.commit('SET_contentPage', this.$store.state.contentPage + 1)
                this.getSubscribleArticle()
            }
        },
        popContentShow() {
            console.log('clicked')
            this.popShow = !this.popShow
        },
        increment() {
            // 登录接口调用
            this.$store.dispatch('login', {
                // Vm: this,
                // username: '41401427',
                // password: '416321',
                // type: 1
            })
            this.count++
        },
        // 订阅 按钮
        btn3click() {
            const Store = this.$store.state
            const Vm = this
            console.log(Store.subscribeStatu)
            if (Store.subscribeStatu === 0) {
                Vm.subscribe()
            } else {
                Vm.unSubscrible()
            }
        },
        // 跳转到 课程页面
        goCourse() {
            this.$router.push({
                path: '/course'
            })
            this.$store.commit('SET_currentCategoryName', '')
            this.$store.commit('SET_contentPage', 1)
        },
        goContent(url) {
            console.log('url', url)
            this.$store.commit('SET_articleUrl', url)
            this.$router.push({
                path: '/article'
            })
        },
        instance(type, contents) {
            const Vm = this
            const title = 'Title'
            const content = contents
            switch (type) {
            case 'info':
                this.$Modal.info({
                    title: title,
                    content: content,
                    closable: true,
                    onOk: Vm.changStatus()
                })
                break
            case 'success':
                this.$Modal.success({
                    title: title,
                    content: content
                })
                break
            case 'warning':
                this.$Modal.warning({
                    title: title,
                    content: content
                })
                break
            case 'error':
                this.$Modal.error({
                    title: title,
                    content: content,
                    onOk: Vm.changStatus()
                })
                break
            }
        },
        // 获取轮播图
        getShufflingImg() {
            const Vm = this
            Vm.$store.dispatch('getShufflingImg')
                .then(res => {
                    if (res.data.status === 1000) {
                        console.log(res.data.result)
                        Vm.$store.commit('SET_shufflingImg', res.data.result)
                        console.log('5222--', res.data.result)
                        Vm.keepTime = res.data.result[0].keepTime * 1000
                        console.log('keep--', Vm.keepTime)
                    } else {
                        console.log(res.data.msg)
                    }
                })
        },
        subscribe() {
            const Vm = this
            Vm.$store.dispatch('subscrible', {
                userId: Vm.$store.state.userInfo.IM_ACCOUNT
            }).then(res => {
                console.log(res)
                if (res.data.status === 1000) {
                    Vm.instance('success', '您已成功订阅！')
                    Vm.$store.commit('SET_subscribeStatu', 1)
                }
                Vm.changStatus()
            })
        },
        unSubscrible() {
            const Vm = this
            Vm.$store.dispatch('unSubscrible', {
                userId: Vm.$store.state.userInfo.IM_ACCOUNT
            }).then(res => {
                console.log(res)
                if (res.data.status === 1000) {
                    Vm.instance('error', '您已取消订阅')
                    Vm.$store.commit('SET_subscribeStatu', 0)
                }
                // Vm.changStatus()
            })
        },
        changStatus() {
            console.log('changges')
            const Vm = this
            if (this.$store.state.subscribeStatu === 1) {
                Vm.$store.commit('SET_subscribeText', '取消订阅')
            } else {
                Vm.$store.commit('SET_subscribeText', '订阅')
            }
        },
        getSubscribleArticle() {
            const Vm = this
            if (Vm.doRefresh) {
                Vm.$store.dispatch('getSubscribleArticle', {
                    // userId: Vm.$store.state.userInfo.IM_ACCOUNT,
                    userId: Vm.account,
                    pageNum: Vm.$store.state.contentPage,
                    pageSize: Vm.$store.state.contentPageSize
                }).then(res => {
                    console.log('公众号文章列表:', res)
                    if (res.data.status === 1000) {
                        console.log('订阅号文章总数', res.data.total)
                        Vm.$store.commit('SET_subTotal', res.data.total)
                        Vm.$store.commit('SET_subscribeContentList', res.data.result)
                        console.log('current page', Vm.$store.state.contentPage)
                        Vm.$store.commit('SET_contentPage', Vm.$store.state.contentPage + 1)
                        Vm.dataLoaded = true
                        Vm.dataLoding = false
                    } else {
                        Vm.$store.commit('SET_subscribeContentList', 'no data')
                    }
                })
            }
        }
    }
}
</script>

<style lang="less" scoped>
@import '../style/sport-variable';

@article-image-size: 85px;
@shuffling-image-width:  calc(~"100% - 22px");
@shuffling-image-height: calc(100px - 18px);
.home-page {
    // height: calc(~'100vh - 50px');
    height: 100vh;
    width: 100%;
    margin-top: -50px;
    background-color: #ffffff;
    .describle {
        // height: 100%;
        width: 100%;
        background-color: #ffffff;
        margin-top: -5px;
        .desc-container {
            height: 100%;
            padding: 6px 20px;
            color: @color-static-content;
            p {
                line-height: 20px;
                text-align: justify;
                text-indent:2em;
            }
        }
    }
    .pop-content {
        // display: none;
        height: 450px;
        width: 100%;
        position: fixed;
        margin: 0;
        padding: 0;
        // bottom: -400px;
        .img-button {
            height: 65px;
            width: 100%;
            text-align:center;
            // box-shadow: 0px -19px 42px #fff;
            // background: tomato;
            img {
                vertical-align:middle;
            }
        }
        .pop-content-bottom {
            height: calc(450px - 255px);
            // margin-top: -5px;
            background-color: @color-background;
            padding-top: 10px;
            // overflow-y: auto;
            .home-shuffling {
                height: 100px;
                width: 100%;
                background-color: #ffffff;
                padding-top: 9px;
                .swiper-container {
                    width: calc(~"100% - 12px");
                    height: calc(100px - 18px);
                    margin: 0 auto;
                }
            }
            .home-article {
                height: 100px;
                width: 100%;
                background-color: #ffffff;
                // background-color: red;
                padding-top: 8px;
                margin-top: 10px;
                .article-content {
                    width: calc(~"100% - 22px");
                    height: 100px;
                    margin: 0 auto;
                    .article-cover {
                        height: calc(~'@{article-image-size}');
                        width: calc(~'@{article-image-size}');
                        float: left;
                        padding: 0;
                        margin: 0;
                        img {
                            width: calc(~'@{article-image-size}');
                            height: @article-image-size;
                        }
                    }
                    .article-show {
                        height: @article-image-size;
                        float: left;
                        padding-left: 10px;
                        padding-left: 10px;
                        padding-top: 8px;
                        width: calc(~"100% - @{article-image-size}");
                        .article-title {
                            color: @color-paragraph-title;
                            font-size: 15px;
                        }
                        .article-desc {
                            margin-top: 5px;
                            color: @color-paragraph-text;
                            font-size: 12px;
                        }
                    }
                }
            }
        }
    }
    .pophide {
        bottom: -385px;
        transition: .15s linear;
    }
    .popshow {
        bottom: -190px;
        transition: .15s linear;
    }
}
.pullRefresh {
    height: calc(450px - 255px) !important;
}
.pullrefesh {
    background: #f2f2f2;
    height: calc(450px - 255px) !important;
    // height: 385px;
}
.shuffling-tags {
    height: 20px;
    width: 40px;
    background-color: @color-theme;
    position: absolute;
    line-height: 20px;
    text-align: center;
    color: #fff;
    font-size: 12px;
    top: 12px;
    border-top-right-radius: 10px 10px;
    border-bottom-right-radius: 10px 10px;
    span {
        margin-left: -5px;
    }
}
.shuffling-title {
    height: 35px;
    width: 70%;
    color: #fff;
    font-size: 16px;
    position: absolute;
    top: 5px;
    right: 16px;
    line-height: 35px;
    text-align: right;
}
.shuffling-desc {
    height: 20px;
    width: 70%;
    color: #fff;
    font-size: 12px;
    position: absolute;
    top: 35px;
    right: 16px;
    line-height: 20px;
    text-align: right;
}
.ivu-modal-confirm-footer {
    button {
        span {
            color: @color-theme;
        }
    }
}

.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 0px !important;
    right: 0 !important;
}
.swiper-pagination {
    text-align: right;
}
.swiper-pagination-bullet {
    height: 6px !important;
    width: 6px !important;
    border-radius: 50% !important;
    color: #fff !important;
}
</style>
